<template>
    <el-config-provider :locale="locale">
        <router-view/>
    </el-config-provider>
</template>
<script lang="ts">
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import ja from 'element-plus/lib/locale/lang/ja';
import en from 'element-plus/lib/locale/lang/en';
import {lang_zhCn} from '@/i18n/zh-cn';
import {lang_ja} from '@/i18n/ja';
import {lang_en} from '@/i18n/en';
import BaseViews from '@/classes/BaseViews.vue';
import {defineComponent, provide, ref} from 'vue';

export default defineComponent({

    extends: BaseViews,
    components: {
        'el-config-provider': ElConfigProvider,
        // 'hello-world': HelloWorld,
    },
    setup(prop, ctx) {

        // ctx.use(HelloWorld)

        zhCn.el = {
            ...zhCn.el,
            ...lang_zhCn
        }
        ja.el = {
            ...ja.el,
            ...lang_ja
        }
        en.el = {
            ...en.el,
            ...lang_en
        }


        const $lang = {
            zhCn,
            en,
            ja
        }


        const locale = ref(zhCn)

        provide('$changeLanguage', (lang: string) => {
            locale.value = $lang[lang]


        })

        return {
            locale
        } as const
    }
    , mounted() {
        console.info(':version:==>', this.version)
    }
})
</script>
<style lang="scss">
#app {
}
</style>
